<template>
  <div>
    <a-button type="primary" @click="getAllRouters">
      <template #icon><SearchOutlined /></template>
      获取当前所有路由
    </a-button>
    <a-button style="margin-left: 20px" @click="addNewRouter">
      <template #icon><PlusOutlined /></template>
      添加新路由
    </a-button>

    <a-button style="margin-left: 20px" @click="jumpNewRouter">
      <template #icon><LinkOutlined /></template>
      跳转新路由
    </a-button>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import router from "@/router";
import eleroute from "@/assets/json/apartRouter.json";

interface routerType {
  path: string;
  name: string;
  component: string | any;
}

let modules = import.meta.glob("@/views/*.vue");
// 路由动态解析成可添加路由对象
function routerBase(obj: Array<routerType>) {
  const tempList: Array<any> = [];
  obj.forEach((item) => {
    tempList.push({
      path: item.path,
      name: item.name,
      component: modules[`/src/views/${item.component}.vue`],
    });
  });
  return tempList;
}

function getAllRouters(): void {
  console.log(router.getRoutes());
}

function addNewRouter() {
  routerBase(eleroute).forEach((item) => {
    if(!router.hasRoute(item.name)){
        router.addRoute(item);
    }else{
        console.log('exits!');
    }
  });
}

function jumpNewRouter(){
    router.push({
        path: '/apartView'
    })
}
</script>

<style scoped></style>
